<template>
  <view class="item">
    <image class="item-img" :src="shopItem.mainImgUrl" mode="aspectFill">
    </image>
    <view class="body">
      <view class="header text-overflow">{{shopItem.spuName}}</view>
      <view class="sold">已售数量：{{shopItem.saleNum}}</view>
      <view class="group">
        <price-point :price="Number(shopItem.priceFee)" :point="Number(shopItem.pointPrice)" :size="28"></price-point>
       <image class="icon" src="../../static/img/cart.png"></image>

      </view>
    </view>
  </view>
</template>

<script setup>
  defineProps({
    shopItem: {
      type: Object,
      default: () => {}
    }
  })
</script>

<style lang="scss" scoped>
  .item {
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    margin-bottom: 26rpx;

    .item-img {
      width: 328rpx;
      height: 289rpx;
      border-radius: 12rpx;
    }

    .body {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 328rpx;
      background: #FFFFFF;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      padding: 16rpx;

      .header {
        height: 40rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
      }

      .sold {
        height: 34rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
        margin: 7rpx 0;
      }

      .group {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: auto;
        .icon {
          flex-shrink: 0;
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
    .btn{
      background-color: antiquewhite;
      border-radius: 20rpx;
      padding: 20rpx;

    }
  }
</style>
